﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载WMS服务地图</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
    <!--  引入第三方插件库 -->
    <script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        body,html,div,ul,li,iframe,p,img{
            border:none;padding:0;margin:0;
        }
        #map{
            width:100%;
            height:570px;
        }
        #menu{
            width:100%;
            height:20px;         
            padding:5px 0px;
            font-size:14px;
            font-family:"微软雅黑";
            left:10px;    
        }
        #menu ul{
            float:left;
        }
        #menu ul li{
            float:left;
            list-style:none;
            margin:0px 15px; 
        }
    </style>
</head>
<body>
     <div id="menu">
        <ul>
            <li >
                <label class="checkbox" ><input type="radio" name="maps" value="img"/>image WMS</label>
            </li>
            <li>
                <label class="checkbox" ><input type="radio" name="maps" value="tile"/>tiled WMS</label>
            </li>

            <li>
                <label class="checkbox" ><input type="radio" name="maps" value="tilegrid"/>tile grid 512x256 WMS </label>
            </li>
        </ul>
    </div> 
    <div id="map" >        
    </div>
    <script type="text/javascript">
        var wmsLayer = null; //WMS地图图层
        //实例化Map对象加载地图,默认底图加载MapQuest地图
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.MapQuest({ layer: 'sat' })
                })
            ],
            target: 'map',
            view: new ol.View({
                center: [-10997148, 4569099],
                zoom: 3
            })
        });
        //实现叠加WMS地图图层的单选框功能
        $("input[type='radio'][name='maps']").attr("checked", false); //所有单选按钮都不选中
        $("input[type='radio'][name='maps']").get(0).checked = true; //选中第一个
        loadWMSMap($("input[name='maps']:checked").val()); //默认加载选中地图

        $("input[name='maps']").each(function () {//循环绑定事件   
            this.onclick = function () {
                if (this.checked) {
                    var checkedVal = $("input[name='maps']:checked").val();
                    loadWMSMap(checkedVal); //根据当前类型加载WMS地图
                }
            }
        });

        /**
        * 根据选择的类型加载WMS地图数据
        * @param {string} type 类型参数
        */
        function loadWMSMap(type) {
            if (wmsLayer != null) {
                map.removeLayer(wmsLayer); //移除WMS地图服务图层
                wmsLayer = null;
            }
            //使用image图层加载
            if (type == "img") {
                //实例化WMS图层对象（ol.layer.Image，ol.source.ImageWMS）
                wmsLayer = new ol.layer.Image({
                    extent: [-13884991, 2870341, -7455066, 6338219], //数据范围
                    source: new ol.source.ImageWMS({
                        url: 'http://demo.boundlessgeo.com/geoserver/wms', //WMS服务基地址
                        params: { 'LAYERS': 'topp:states' }, //图层参数
                        serverType: 'geoserver' //服务类型
                    })
                });    
            }
            //使用tile图层加载
            else if (type == "tile") {
                //实例化WMS图层对象（ol.layer.Tile，ol.source.TileWMS）
                wmsLayer = new ol.layer.Tile({
                    source: new ol.source.TileWMS({
                        url: 'http://demo.boundlessgeo.com/geoserver/ne/wms', //WMS服务地址
                        params: { 'LAYERS': 'ne:ne_10m_admin_0_countries', 'TILED': true }, //图层等参数
                        serverType: 'geoserver'//服务类型
                    })
                })
            }
            //使用自定义tileGrid的tile图层加载(tile grid 512x256)
            else if (type == "tilegrid") {
                //通过范围计算得到分辨率数组对象resolutions
                var projExtent = ol.proj.get('EPSG:3857').getExtent();
                var startResolution = ol.extent.getWidth(projExtent) / 256;
                var resolutions = new Array(22);
                for (var i = 0, ii = resolutions.length; i < ii; ++i) {
                    resolutions[i] = startResolution / Math.pow(2, i);
                }
                //实例化ol.tilegrid.TileGrid对象
                var tileGrid = new ol.tilegrid.TileGrid({
                    extent: [-13884991, 2870341, -7455066, 6338219], //数据范围
                    resolutions: resolutions, //分辨率数组
                    tileSize: [512, 256] //瓦片大小
                });
                //使用ol.layer.Tile实例化WMS图层对象，设置ol.source.TileWMS的tileGrid参数
                wmsLayer = new ol.layer.Tile({
                    source: new ol.source.TileWMS({
                        url: 'http://demo.boundlessgeo.com/geoserver/wms', //WMS服务地址
                        params: { 'LAYERS': 'topp:states', 'TILED': true }, //图层等参数
                        serverType: 'geoserver', //服务类型
                        tileGrid: tileGrid  //瓦片网格对象参数（瓦片大小为512x256）
                    })
                })
            }
            map.addLayer(wmsLayer); //添加WMS地图图层   
        }
</script>
</body>
</html>
